import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import styles from "./index.module.css";

export async function getStaticProps({ locale }: LocaleType) {
  const i18n = await serverSideTranslations(locale, ["common"]); // 多语言设置
  return {
    props: {
      ...i18n,
    },
  };
}

const Home = () => {
  const router = useRouter();
  const { t } = useTranslation("common");
  const changeTo = router.locale == "zh" ? "en" : "zh";

  return (
    <div className={styles["container"]}>
      <h2>Home 首页</h2>
      <Link href="/test">跳转到test</Link>
      <p>姓名：{t("name")}</p>
      <Link href="/" locale={changeTo}>
        <span className={styles["btn"]}>{t("change-locale", { changeTo })}</span>
      </Link>
      <div>
        <Image alt="My Image" priority width={400} height={400} src="/fire.png" />
      </div>
    </div>
  );
};

export default Home;
